<template>
	<view class="wrap">
		<view class="top">
			<image class="icon" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/76.png" mode="widthFix"></image>

			不同角度分享，好友看到的H5页面也不同呦～
		</view>
		<view class="imgs">
			<u-swiper img-mode="widthFix" border-radius="0" @change="change" height="1193" :autoplay="false" :list="list"></u-swiper>
		</view>

		<view @click="sameImg" class="btn">
			<image class="icon" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/77.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				src: '',
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',

					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',

					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',

					}
				],
			}
		},
		onLoad() {
			this.src = this.list[this.current]?.image
		},
		methods: {
			change(index) {
				this.current = index
				this.src = this.list[this.current]?.image
			},
			sameImg() {

				
				console.log(this.src,33333333333);
				// #ifdef APP-PLUS
				uni.saveImageToPhotosAlbum({
					filePath: this.src,
					success: function() {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					}
				});
				// #endif


				// #ifdef H5
				var oA = document.createElement("a"); // 创建一个a标签
				// 正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本 ,
				// a的download 谷歌浏览器必须同源才能强制下载，否则跳转到图片地址
				oA.download = this.src.replace(/(.*\/)*([^.]+.*)/ig, "$2").split("?")[0]; // 设置下载的文件名，默认是'下载'
				oA.href = this.src;
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除

				// #endif

			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-list-image-wrap{
		border-radius: 0 !important;
	}
	.wrap {
		
		width: 750rpx;
		height: 1624rpx;
		background: linear-gradient(180deg, #6B3AFF 0%, #9795FF 43%, #2E23AC 99%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
	}

	.btn {
		margin: 40rpx 32rpx;
		.icon{
			width: 100%;
		}
	}

	// /deep/ .u-swiper-wrap {
	// 	overflow: inherit !important;
	// }

	// /deep/ .u-swiper-indicator {
	// 	bottom: -40rpx !important;
	// }

	.top {
		// padding-top: 30px;
		// padding-bottom: 10px;
		background: linear-gradient(to right, #786CFF, #9A5BFF);
		height: 90rpx;
		width: 100%;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 47rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.icon {
			width: 70rpx;
			height: 70rpx;
		}
	}

	.imgs {
		margin: 32rpx 32rpx;
		background: #CBBCF5;
		border: 10rpx solid #FFFFFF;
		overflow: hidden;
	}
</style>
